<template>
	<view class="business-card">
		<view class="title">
			请完善以下信息
		</view>
		<view class="head">
			<view class="head-mesg">
				<view class="mesg">
					<view class="schedule-mesg">
						<span style="margin-right: 10rpx;">名片完善度:</span>
						<view style="width: 300rpx;" class="schedule">
							<van-progress :percentage="50" stroke-width="24rpx" :show-pivot="false"></van-progress>
						</view>
						<span style="margin-left: 20rpx;color: #ED6A0C;">50%</span>
					</view>
					<view v-if="false" @click="goPerfect" class="supplement ">
						资料越完善 找活越容易,马上去完善 >>
					</view>
					<view v-else @click="goShare" class="supplement">分享您的找活名片 可提升您的排名</view>
				</view>
				<view class="browseNum">
					<view style="font-weight: bold;font-size: 32rpx;color: #007AFF;">0</view>
					<view style="margin-top: 20rpx;">浏览次数</view>
				</view>
			</view>
			<view class="ranking">
				<view class="ranking-top">
					<image src="../../../static/找活名片_03.jpg"></image>
					<span>我的排名点：</span><span>5</span>
				</view>
				<span @click="goRule" class="go">马上去提升排名>></span>
			</view>
			<view class="ranking">
				<view class="ranking-top">
					<image src="../../../static/找活名片_03-02.jpg"></image>
					<span>我的置顶：</span><span>未置顶</span>
				</view>
				<span class="go">马上去置顶>></span>
			</view>
		</view>
		<view class="basics">
			<image src="../../../static/找活名片_03-03.jpg"></image>
			基础信息
		</view>
		<view v-if="false" class="perfect">
			完善基础信息，可以发布找活
			<view class="go" @click="peopleMessage">去完善</view>
		</view>
		<view v-else>
			<view class="basics-mesg">
				<view class="title-head">
					<image src='../../../static/项目.png' mode=""></image>
					我的工作状态
				</view>
				<view v-if="true" class="status">人工审核中</view>
				<view v-else class="menue-image">
					<picker @change="bindPickerChange" :range="array">
						<label class="">{{array[index]}}</label>
					</picker>
					<image src="../../../static/下箭头.png" mode=""></image>
				</view>
			</view>
			<view class="message-people">
				<view class="title">
					<view class="update-audit">
						<view v-if="true" @click="goMyWork" class="update">编辑</view>
						<view v-else class=""></view>
					</view>
					<image src="../../../static/微信.png" mode=""></image>
					<view class="message">
						<view class="name">先生</view>
						<view class="mesg">
							<span class="type-peo">男</span>
							<span class="type-peo">22岁</span>
							<span class="type-peo">苗族</span>
						</view>
					</view>
				</view>
				<view class="craft" style="align-items: flex-start;">
					<view style="display: flex;align-items: center;">
						<image src="../../../static/原点.png" mode=""></image>
						<span class="name">工种</span>
					</view>
					<span style="margin-right: 10rpx;">:</span>
					<view class="peo-mesg">
						<view style="background: #e1e1e1;line-height: 40rpx;margin-bottom: 4rpx;" v-for="(item,index) in label" :key="index">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">手机</span>
					<span style="margin-right: 10rpx;">:</span>
					<span class="peo-mesg">12345678911</span>
				</view>
				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">期望地区</span>
					<span style="margin-right: 10rpx;">:</span>
					<span class="peo-mesg">地址</span>
				</view>
				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">自我介绍</span>
					<span style="margin-right: 10rpx;">:</span>
					<span class="peo-mesg">测试测试</span>
				</view>
			</view>
		</view>

		<view class="basics">
			<view style="display: flex; align-items: center;">
				<image src="../../../static/找活名片_03-04.jpg"></image>
				人员信息
			</view>
			<view @click="goPeopleMessage" v-if="true" class="add">编辑</view>
		</view>
		<view v-if="false" class="perfect">
			完善人员信息，能让老板充分了解您或您的队伍
			<view class="go" @click="goPeopleMessage">去完善</view>
		</view>
		<view v-else>
			<view class="message-people" style="color: #737373;">
				<view v-for="(item,index) in peopleMessages" :key="index">
					<view class="craft">
						<image src="../../../static/原点.png" mode=""></image>
						<span class="name">{{item.name}}</span>
						<span style="margin-right: 10rpx;">:</span>
						<span>{{item.value}}</span>
					</view>
				</view>

				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">标签</span>
					<span style="margin-right: 10rpx;">:</span>
					<view v-for="(item,index) in peopleLabels" :key="index">
						<span style="color: #007AFF; border: solid 1px #007AFF;border-radius: 10rpx;margin-right: 10rpx;">{{item}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="basics">
			<view style="display: flex; align-items: center;">
				<image src="../../../static/找活名片_03-04.jpg"></image>
				项目经验
			</view>
			<view @click="goExperience" v-if="true" class="add">添加</view>
		</view>
		<view v-if="false" class="perfect">
			添加项目经验,可提升老板对您的信任程度
			<view class="go">去完善</view>
		</view>
		<view v-else class="basics-status">
			<view style="padding: 20rpx 20rpx 20rpx 92rpx;">
				<view class="pass">未通过</view>
				<view class="title-status">
					<view class="title-text">测试测试</view>
					<view @click="goExperience" style="color: #007AFF;font-size: 32rpx;">待修改</view>
				</view>
				<view class="time-address">
					<span>2020-11-05</span>
					<span>-</span>
					<span>2020-11-06</span>
					<span style="margin-left: 20rpx;">地址</span>
				</view>
				<view class="content">
					测试测试
				</view>

				<view class="images">
					<image src="../../../static/logo.png" mode=""></image>
					<image src="../../../static/logo.png" mode=""></image>
					<image src="../../../static/logo.png" mode=""></image>
				</view>
				<view style="color: #df0000;">
					未通过原因
				</view>
			</view>
			<view class="more-status">
				<view @click="goUpdateProject" class="more-image">
					修改项目经验
					<image src="../../../static/下箭头白.png"></image>
				</view>
				<view v-if="true" class="corner-mark">9</view>
			</view>
		</view>
		<view class="basics">
			<view style="display: flex; align-items: center;">
				<image src="../../../static/找活名片_03-06.jpg"></image>
				职业技能
			</view>
			<view v-if="true" class="add" @click="goCertificate">添加</view>
		</view>
		<view v-if="false" class="perfect">
			添加职业技能,用实力证明您的能力
			<view class="go" @click="goCertificate">去完善</view>
		</view>
		<view v-else class="basics-status" style="margin-bottom: 20rpx;">
			<view style="padding: 20rpx 20rpx 20rpx 80rpx;">
				<view class="pass">未通过</view>
				<view class="title-status">
					<view class="title-text">测试测试</view>
					<view @click="goCertificate" style="color: #007AFF;font-size: 32rpx;">待修改</view>
				</view>
				<view class="time-address">
					<span>2020-11-05</span>
				</view>

				<view class="images">
					<image src="../../../static/logo.png" mode=""></image>
					<image src="../../../static/logo.png" mode=""></image>
					<image src="../../../static/logo.png" mode=""></image>
				</view>
				<view style="color: #df0000;">
					未通过原因
				</view>
			</view>
			<view class="more-status">
				<view @click="goUpdateCertificate" class="more-image">
					修改技能证书
					<image src="../../../static/下箭头白.png"></image>
				</view>
				<view v-if="true" class="corner-mark">9</view>
			</view>
		</view>
		<view class="more">
			<view class="left"></view>
			<view class="content">附近适合您的工作</view>
			<view class="right"></view>
		</view>
		<view class="">
			<view v-for="message in messages" :key="message.id">
				<my-recruit :people="message"></my-recruit>
			</view>
		</view>
		<view class="recruiting">
			查看更多招工信息
		</view>
		<view class="foot">
			<view @click="goPerview" class="left">
				<image src="../../../static/预览模版.png" mode=""></image>
				预览
			</view>
			<view @click="goShare" class="right">
				<image src="../../../static/分享foot.png" mode=""></image>
				分享
			</view>
		</view>
		<my-draw ref="popup"></my-draw>
	</view>
</template>

<script>
	import myRecruit from '../../../components/recruits.vue'
	import mescrollMixin from '../../../components/mescroll-uni/mescroll-mixins.js'
	import mescrollBody from '../../../components/mescroll-uni/mescroll-body.vue'
	import myDraw from '../../../components/draw.vue'
	export default {
		mixins: [mescrollMixin],
		data() {
			return {
				label: ["吃苦耐劳", "尽心尽力"],
				peopleLabels: ["吃苦耐劳", "尽心尽力"],
				userMesg: {
					name: "测试",
					addr: "地址"
				},
				peopleMessages: [{
					name: "工龄",
					value: "66年"

				}, {
					name: "人员构成",
					value: "班组"
				}, {
					name: "家乡",
					value: "甘肃"
				}, {
					name: "熟练度",
					value: "学徒工"
				}, {
					name: "队伍人数",
					value: "5"
				}],
				array: ["正在找工作", "已找到工作"],
				index: 0,
				messages: [{
						id: 1,
						title: "测试123456789asdasdaddad",
						top: true,
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						concent: "招聘信息asdasdadadssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
						recruiting: true,
						address: "广州",
						time: "2020-10-15 10:03"
					},
					{
						id: 2,
						title: "测试测试123456789",
						top: false,
						image: "../static/首页ok_29-17.jpg",
						name: "",
						concent: "招聘信息",
						recruiting: false,
						address: "广州天河区广州天河区广州天河区广州天河区",
						time: "2020-10-15 10:03"
					},
					{
						id: 3,
						title: "测试123456789",
						top: true,
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						concent: "招聘信息asdasdadadssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
						recruiting: true,
						address: "广州",
						time: "2020-10-15 10:03"
					},
					{
						id: 4,
						title: "测试测试123456789",
						top: false,
						image: "../static/首页ok_29-17.jpg",
						name: "",
						concent: "招聘信息",
						recruiting: false,
						address: "广州天河区广州天河区广州天河区广州天河区",
						time: "2020-10-15 10:03"
					},
				]
			}
		},
		components: {
			'myRecruit': myRecruit,
			'mescrollBody': mescrollBody,
			'myDraw':myDraw
		},
		methods: {
			goPerfect(){
				if(true){
					
				}else if(true){
					
				}else if(true){
					
				}else{
					
				}
			},
			goRule(){
				uni.navigateTo({
					url:'../../findpeople/publish/rule'
				})
			},
			goPerview(){
				uni.navigateTo({
					url:'preview'
				})
			},
			goShare(){
				this.$refs.popup.$refs.popupShow.open()
			},
			peopleMessage() {
				uni.navigateTo({
					url: '../perfectmessage/myWork'
				})
			},
			goExperience(){
				uni.navigateTo({
					url:"../perfectmessage/experience"
				})
			},
			goMyWork(peoMesg) {
				peoMesg = encodeURIComponent(JSON.stringify(this.userMesg))
				uni.navigateTo({
					url: '../perfectmessage/myWork?peoMesg = ' + peoMesg
				})
			},
			goPeopleMessage(userM) {
				if (userM) {
					userM = encodeURIComponent(JSON.stringify(this.userMesg))
					uni.navigateTo({
						url: '../perfectmessage/peopleMessage?userM = ' + userM
					})
				} else {
					uni.navigateTo({
						url: '../perfectmessage/peopleMessage'
					})
				}

			},
			goCertificate() {
				uni.navigateTo({
					url: '../perfectmessage/certificate'
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value
			},
			goUpdateProject() {
				uni.navigateTo({
					url: '../updatepage/updateProject'
				})
			},
			goUpdateCertificate() {
				uni.navigateTo({
					url: '../updatepage/updateCertificate'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.business-card {
		background: #d9d9d9;
		padding-bottom: 100rpx;
		.title {
			font-size: 32rpx;
			background: #FFFFFF;
			text-align: center;
			width: 100vw;
			line-height: 80rpx;
			margin-bottom: 20rpx;
		}

		.head {
			font-size: 30rpx;
			line-height: 50rpx;
			padding: 20rpx;
			background: #FFFFFF;

			.head-mesg {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.mesg {
					.schedule-mesg {
						display: flex;
						align-items: center;
					}

					.supplement {
						color: #007AFF;
						margin-top: 20rpx;
					}
				}

				.browseNum {
					text-align: center;
					display: flex;
					flex-direction: column;
				}
			}

			.ranking {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				border-bottom: solid 1px #cecece;

				.ranking-top {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.go {
					color: #007AFF;
				}
			}
		}

		.basics {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			padding: 16rpx;
			position: relative;

			.add {
				position: absolute;
				right: 40rpx;
				color: #007AFF;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.perfect {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #FFFFFF;
			line-height: 60rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;

			.go {
				display: inline-block;
				background: #007AFF;
				padding: 0 10rpx;
				color: #FFFFFF;
				border-radius: 12rpx;
			}
		}

		.more {
			display: flex;
			line-height: 80rpx;
			background: #FFFFFF;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;

			.left,
			.right {
				width: 32vw;
				border-bottom: solid 1px #cccccc;
			}
		}

		.recruiting {
			text-align: center;
			padding: 30rpx;
			background: #FFFFFF;
			color: #007AFF;
			font-size: 38rpx;
			margin-bottom: 20rpx;
		}

		.basics-mesg {
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			padding: 10rpx 40rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;

			.title-head {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.menue-image {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
			}
		}

		.message-people {
			background: #FFFFFF;
			padding: 40rpx;

			.title {
				display: flex;
				line-height: 60rpx;
				align-items: center;
				position: relative;

				.update {
					color: #007AFF;
					font-size: 32rpx;
					position: absolute;
					top: -30rpx;
					right: 70rpx;
				}

				.type-peo {
					margin-right: 10rpx;
					color: #737373;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 30rpx;
				}

				.message {
					text-align: left;
				}
			}

			.craft {
				display: flex;
				align-items: center;
				line-height: 60rpx;

				.peo-mesg {
					color: #7f7f7f;
				}

				.name {
					width: 140rpx;
					text-align-last: justify;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}

		.basics-status {
			background: #FFFFFF;
			position: relative;
			overflow: hidden;

			.pass {
				width: 170rpx;
				position: absolute;
				top: 23rpx;
				left: -46rpx;
				text-align: center;
				padding: 0 20rpx;
				background: #ff0000;
				color: #FFFFFF;
				font-size: 32rpx;
				-moz-transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			.title-status {
				display: flex;
				justify-content: space-between;

				.title-text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.time-address {
				line-height: 60rpx;
				color: #7f7f7f;
			}

			.content {
				line-height: 60rpx;
			}

			.images {
				display: flex;
				flex-wrap: wrap;

				image {
					margin-right: 40rpx;
					margin-bottom: 20rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}
			}

			.more-status {
				display: flex;
				justify-content: center;
				color: #FFFFFF;
				align-items: center;
				padding-bottom: 20rpx;
				position: relative;

				.corner-mark {
					background: #b50000;
					color: #FFFFFF;
					padding: 0 10rpx;
					border-radius: 999rpx;
					position: absolute;
					top: -30rpx;
					left: 503rpx;
				}

				.more-image {
					width: auto;
					display: flex;
					align-items: center;
					line-height: 60rpx;
					padding: 0 20rpx;
					background: #007AFF;
					border-radius: 10rpx;
					letter-spacing: 4rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		.foot{
			display: flex;
			position: fixed;
			bottom: 0;
			background: #FFFFFF;
			border: solid 1px #dcdcdc;
			.left,.right{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50vw;
				padding: 40rpx;
			}
			.left{
				border-right: solid 1px #dcdcdc;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 14rpx;
			}
		}
	}
</style>
